<template>
  <view class="wrap">
    <view class="header-back">
			<image src="/static/my/store.jpeg" class="img"></image>
			<view class="btn-integral-box">
				<view class="integral">41456</view>
				<view class="btn-list">
					<view class="integ-details" @click="intefDetail">积分明细</view>
					<view class="integ-convert" @click="interRecord">积分兑换记录</view>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="border-back">
				<view class="store-list">
					<view class="decorate-box">
						<view class="decorate"></view>
						<view class="decorate" style="margin: 8rpx 0;"></view>
						<view class="decorate"></view>
					</view>
					<view class="title">热换榜单</view>
					<view class="decorate-box">
						<view class="decorate"></view>
						<view class="decorate" style="margin: 8rpx 0;"></view>
						<view class="decorate"></view>
					</view>
				</view>
				<!-- 列表 -->
				<view>
					<view class="img-conversion-list" v-for="(item,index) in converList" :key="item.id">
						<image src="/static/my/the_gift.png" class="gigt-img"></image>
						<view class="item-text-btn">
							<view class="free-vip">{{item.freeVip}}</view>
							<view class="consume">{{item.consume}}</view>
							<view class="btn">立即兑换</view>
						</view>
					</view>
				</view>
			</view>
		</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
				converList: [
					{ id: 1, freeVip: '3日VIP免费领', consume: '消耗积分200分', url: '/static/my/the_gift.png'},
					{ id: 2, freeVip: '7日VIP免费领', consume: '消耗积分800分', url: '/static/my/the_gift.png'},
					{ id: 3, freeVip: '30日VIP免费领', consume: '消耗积分2000分', url: '/static/my/the_gift.png'}
				],
				statuHeight: uni.getSystemInfoSync().statusBarHeight + 44, // 状态栏高度
			}
    },
  onShow() {
		console.log('状态栏高度',this.statuHeight)
	},
  methods: {
		// 积分记录
		interRecord() {
			uni.navigateTo({
				url: '/pages/my/sign/integ_record'
			})
		},
		// 积分明细
		intefDetail() {
			uni.navigateTo({
				url: '/pages/my/buy_vip/buy_record'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	view{
		letter-spacing:2px;
		box-sizing: border-box;
	}
	.wrap{
		height: 100vh;
		background: #7F2EE1;
	}
	.header-back{
		width: 100%;
		height: 414rpx;
		position: relative;
		.img{
			width: 100%;
			height: 100%;
		}
		.btn-integral-box{
			position: absolute;
			bottom: 8px;
			left: 0;
			right: 0;
			.integral{
				font-size: 50rpx;
				font-family: PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
				text-align: center;
				margin-bottom: 40rpx;
			}
			.btn-list{
				display: flex;
				align-items: center;
				justify-content: center;
				.integ-details,.integ-convert{
					width: 180rpx;
					height: 60rpx;
					border: 2rpx solid #FFFFFF;
					border-radius: 27rpx;
					line-height: 60rpx;
					text-align: center;
					font-size: 28rpx;
					font-family: PingFang SC;
					color: #FFFFFF;
				}
				.integ-convert{
					font-size: 24rpx;
					margin-left: 22rpx;
				}
			}
		}
	}
	.main{
		margin-top: 35rpx;
		padding: 0 30rpx;
		background: #7F2EE1;
		.border-back{
			position: relative;
			width: 100%;
			// height: 800rpx;
			box-sizing: border-box;
			box-shadow:0 0 9px 5px #BC3AEF inset;
			background: #3C1168;
			padding-bottom: 80rpx; 
			.store-list{
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 20rpx 0 50rpx 0;
				.decorate-box{
					.decorate{
						width: 167rpx;
						height: 4rpx;
						background: #9B2DC6;
					}
				}
				.title{
					font-size: 40rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					letter-spacing:2px;
				}
			}
			.img-conversion-list{
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 35rpx;
				.gigt-img{
					width: 193rpx;
					height: 185rpx;
				}
				.item-text-btn{
					color: #FFFFFF;
					font-size: 24rpx;
					margin-left: 65rpx;
					.consume{
						margin: 20rpx 0;
						font-size: 26rpx;
					}
					.free-vip{
						font-size: 30rpx;
						font-family: Adobe Heiti Std;
						font-weight: 500;
					}
					.btn{
						width: 130rpx;
						height: 46rpx;
						background: #943BFF;
						border-radius: 5rpx;
						line-height: 46rpx;
						text-align: center;
					}
				}
			}
		}
	}
</style>
